<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>推荐</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png"
        th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
    <linK rel="stylesheet" href="../static/css/mainPage/mainPage.css" th:href="@{/css/mainPage/mainPage.css}">
    <linK rel="stylesheet" href="../static/css/nav/nav.css" th:href="@{/css/nav/nav.css}">

</head>

<body>
    <span class="alert"></span>
    <div class="top-bar-first" th:replace="layout/mainPage::topBarFirst"></div>
    <div class="top-bar-second" th:replace="fragments/top-bar-second::topBarSecond"></div>
    <div class="search" th:replace="layout/mainPage::searchBack"></div>

    <!-- 主内容与侧边栏 -->
    <div class="content">
        <div class="content-left">
            <div class="classify">
                <ul class="main-categories" th:replace="layout/mainPage::main-categories"></ul>
            </div>
            <div class="content-area">
                <div class="recommend-content item active" data-category="recommend">
                    <div class="hot-search">
                        <div class="hot-search-title">
                            <span class="hot-search-title-text">热点</span>
                            <span class="today" th:text="${date}"></span>
                        </div>
                        <div class="hot-search-content">
                            <div th:each="todayHotSearch: ${todayHotSearch}">
                                <i class="iconfont icon-5yuan"></i>
                                <a class="hot-content" th:text="${todayHotSearch.keyword}"></a>
                            </div>
                        </div>
                    </div>
                    <div class="news-contents" th:each="post:${posts}">

                        <div class="feed-card">
                            <span class="news-postId" style="display:none" th:text="${post.postId}"></span>
                            <span class="news-userId" style="display:none" th:text="${post.userId}"></span>
                            <a class="title" th:text="${post.title}"></a>
                            <div class="feed-card-bottom">
                                <span class="comments-num"><span th:text="${post.commentCount}"></span>评论</span>
                                <span class="post-date" th:text="${post.createdTime}"></span>
                            </div>
                        </div>
                        <div class="news-image" th:if="${post.coverImage}">
                            <a>
                                <img th:src="${post.coverImage}" alt="">
                            </a>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="content-right" th:replace="layout/mainPage::content-right"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script th:inline="javascript">
        // 通过Thymeleaf表达式获取userInfo
        var userInfo = /*[[${userInfo}]]*/ null;
        console.log(userInfo);
        if (userInfo && userInfo.userId) {
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            localStorage.setItem('isLoggedIn', 'true');
            console.log('用户信息已存储到LocalStorage');
        } else {
            // 未登录时清空localStorage（避免残留旧数据）
            localStorage.removeItem('userInfo');
            localStorage.removeItem('isLoggedIn');
            console.log('未登录，清空LocalStorage');
        }
        // 通过Thymeleaf表达式获取posts
        // var posts = /*[[${posts}]]*/ null;
        // if (posts) {
        //     localStorage.setItem('posts', JSON.stringify(posts));
        //     console.log('posts已存储到LocalStorage');
        // }
        var hasMore =/*[[${hasMore}]]*/[];
        // console.log(hasMore);
        var todayHotSearch =/*[[${todayHotSearch}]]*/[];
        console.log(todayHotSearch);
        var totalHotSearch =/*[[${totalHotSearch}]]*/[];
        console.log(totalHotSearch);
        //今日热搜
        function loadTodayHotSearch() {
            const Num = 1;
            $.ajax({
                url: `/SearchController/TodayHotSearch/${Num}`,
                type: "GET",
                data: {
                    Num: 1
                },
                success: function (result) {
                    console.log("以获取");
                    const hotSearchContainer = document.querySelector('.hot-search');
                    hotSearchContainer.innerHTML = '';
                    console.log(result);
                    let html = `
                <div class="hot-search-title">
                    <span class="hot-search-title-text">热点</span>
                    <span class="today">${result.date}</span>
                </div>
                <div class="hot-search-content">
            `;
                    const keywords = result.keywords;
                    const postLists = result.postLists;
                    for (let i = 0; i < keywords.length; i++) {
                        const keyword = keywords[i];
                        const postId = postLists[i].postId;
                        const userId = postLists[i].userId;
                        html += `
                    <div onclick="goToEssayPage('${postId}', '${userId}')">
                        <i class="iconfont icon-5yuan"></i>
                        <a class="hot-content">${keyword}</a>
                    </div>
                `;
                    }

                    html += '</div>';

                    hotSearchContainer.innerHTML = html;
                    truncateTitles({ selector: '.hot-content', maxLength: 20 });
                },
                error: function (error) {
                    console.log(error);
                }
            })
        }
        loadTodayHotSearch();
    </script>
    <script src="../static/js/mainPage.js" th:src="@{/js/mainPage.js}"></script>
    <script src="../static/js/nav.js" th:src="@{/js/nav.js}"></script>


</body>

</html>